<!--资讯页面-->
<template>
  <div class="information">
    <div class="swipe">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img src="https://imgfs.oppo.cn/uploads/common/2017/12/11/15129604723997.jpg" alt="轮播图">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="http://imgfs.oppo.cn/uploads/common/2017/12/05/15124393298042.jpg" alt="轮播图">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="https://imgfs.oppo.cn/uploads/common/2017/11/29/15119282726746.jpg" alt="轮播图">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <head-top head-title="OPPO 社区"></head-top>
    <div class="informationMian">
      <ul style="margin-left: -40px">
        <li v-for="(information,index) in informations" class="Mainlist" @click="open(information.id)"
            :id="information.id">
          <h3 class="MainTitle" style="color:#434343"> {{information.title}}</h3>
          <span class="MianTime">{{information.time}}</span>
          <div class="informationImg">
            <div class="bg-company" v-lazy:background-image="`${information.img}`"></div>
          </div>
          <a>阅读全文</a>
        </li>
      </ul>

    </div>
    <div class="informationfooter">
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import {Swipe, SwipeItem, Lazyload} from 'mint-ui';
  import footer from './footer.vue'
  import Vue from 'vue'
  import headTop from './header.vue'
  //  实现背景图片懒加载（利用mint-ui）
  Vue.use(Lazyload, {
    preLoad: 1.3,
    error: 'http://img.mp.sohu.com/upload/20170519/6e8fd80f38774e9c9be2b1a9b84e3e79.gif',
    loading: 'http://img.lanrentuku.com/img/allimg/1212/5-121204193955-51.gif',
    attempt: 1
  });
  export default {
    name: "information",
    data() {
      return {
        informations: []
      }
    },
    mounted: function () {
      this.getDate()
    },
    components:{
      "v-footer":footer,
      headTop
    },
    methods: {
      getDate() {
        var _this = this;
        this.$http.get("/static/information.json").then(res => {
          for (var i = 0, len = res.body.informations.length; i < len; i++) {
            var selData = res.body.informations[i];
            var part = res.body.informations[i].name;
            _this.informations.push(selData);
          }
        })
      },
      open(id) {
        this.$router.push({path: "news", query: {id: id}})
      },
    }


  }
</script>


<style>
  .swipe {
    height: 6.5rem;
  }

  .swipe img {
    width: 100%;
    height: 6.5rem;
  }

  .Mainlist {
    width: 100%;
    height: 7rem;
    background: white;
    margin-top: 5px;
    padding-top: 0.35rem;
  }

  .MainTitle {
    width: 77%;
    text-align: left;
    margin-left: 10px;
    color: rgb(67, 67, 67);
    font-size: 0.4rem
  }

  .MianTime {
    width: 78%;
    margin-left: 10px;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 0.1rem;
  }

  .informationImg .bg-company {
    width: 100%;
    height: 4.7rem;
    background-position: center center;
    background-size: cover;
  }

  .Mainlist a {
    float: right;
    font-size: 0.3rem;
    margin-right: 0.75rem;
    margin-top: 0.2rem;
    color: black;
  }
</style>
